<template>
	<view class="comment">
		<view class="box">
			<view class="list dis-flex flex-x-between flex-x-start" v-for="item in list" :key="item.id"
				@click="toDetail(item.article_id)">
				<image :src="IMG_URL + item.user.avatar" class="avatar" mode="widthFix" />
				<view class="flex-box lines">
					<view class="who">{{ item.user.username }} <text class="fans" v-if="item.isFan">你的粉丝</text></view>
					<view class="time">评论了你的帖子 <text class="now">{{ item.createtime | handleData }}</text></view>
					<view class="commentContent">{{ item.contents }}</view>
					<view class="tags dis-flex flex-x-start flex-y-center">
						<view class="dis-flex flex-y-center flex-x-center tag_l" @click.stop="onZan(item)">
							<image v-if="item.isLikeRemark == false" src="/static/imgs/xin.png" class="icons"
								mode="widthFix" />
							<image v-else src="/static/imgs/xin1.png" class="icons" mode="widthFix" />
							<text v-if="item.isLikeRemark == false">赞</text>
							<text v-else-if="item.isLikeRemark == true">已赞</text>
						</view>
						<view class="dis-flex flex-y-center flex-x-center tag_l" @click="showReply">
							<image src="/static/imgs/im.png" class="icons" mode="widthFix" />回复
						</view>
					</view>
				</view>
				<view class="talk">
					<image :src="item.articles.picture | handlePic" class="likes_img" mode="widthFix" />
				</view>
			</view>
		</view>
		<!-- 评论弹窗 -->
		<u-modal :show="show" :title="title" confirmText="回复" showCancelButton @cancel="() => show = false"
			@confirm="confirmBtn()">
			<view class="slot-content">
				<u-textarea v-model="content" height="100" border="none" placeholder="请输入回复内容"></u-textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
import {
	readNum,
	getEveluateList,
	zanArticle,
	cancelZan,
	Givethe,
	quGive,
	replyRemark
} from "../../api/im.js";
import st from "../../utlis/showtoast.js";
import {
	IMG_URL,
} from "../../config/app.js";

export default {
	data() {
		return {
			IMG_URL: IMG_URL,
			page: 1,
			total: 0,
			list: [],
			show: false,
			value: '',
			title: '',
			id: '',
			Givelisk: false,
			content: '',//评论内容
			article_id: '',//文章id
			remark_id: '',//评论id
		}
	},
	/**
	 * 刷新
	 */
	onPullDownRefresh() {
		this.onRefresh()
	},
	onReachBottom() {
		this.onLoadMore()
	},
	onLoad() {
		this.changeReadNumData()
		this.getData()
	},
	methods: {

		// 跳转详情页
		toDetail(id) {
			uni.navigateTo({
				url: '/pages/hall/hallDetails?id=' + id,
			})
		},
		/**
		 * 赞点击
		 */
		onZan(item) {
			if (item.isLikeRemark) {
				// console.log('取消赞')
				//取消赞
				let res = quGive(item.id)
				st.success(res.msg, () => {
					this.onRefresh()
				})
			} else {
				//赞
				let res = Givethe(item.id)
				st.success(res.msg, () => {
					this.onRefresh()
				})
			}
		},
		// 回复
		showReply() {

			this.show = true
		},
		confirmBtn() {
			let res = replyRemark(this.remark_id, this.content, this.article_id)
			console.log(res)
			this.show = false
		},

		/**
		 * 刷新
		 */
		onRefresh() {
			this.page = 1;
			this.list = []
			this.getData()
		},
		/**
		 * 加载更多
		 */
		onLoadMore() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData()
			}
		},
		/**
		 * 网络请求
		 */
		async getData() {
			let res = await getEveluateList(this.page)
			this.article_id = res.data.data[0].article_id
			this.remark_id = res.data.data[0].id
			// console.log(res.data.data[0].articles.id)
			this.id = res.data.data[0].articles.id
			this.total = parseInt(res.data.total)
			if (this.page == 1) {
				this.list = res.data.data
			} else {
				this.list = [...this.list, ...res.data.data]
			}
		},
		/**
		 * 未读变已读
		 */
		async changeReadNumData() {
			await readNum("remark_read")
		}
	},
	filters: {
		// 处理图片
		handlePic(pic) {
			if (pic == "") {
				return ""
			}
			let array = pic.split(",")
			return IMG_URL + array[0]
		},
		// 时间
		handleData(time) {
			let date = parseInt(new Date().getTime() / 1000) - parseInt(time)
			let second = parseInt(date % 60);
			let min = parseInt(parseInt(date / 60) % 60);
			let hour = parseInt(parseInt(date / 3600) % 24);
			let day = parseInt(parseInt(date / 3600 / 24) % 30);

			let dateObj = new Date(parseInt(time) * 1000);
			let year = dateObj.getFullYear();
			let month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
			let day2 = dateObj.getDate().toString().padStart(2, '0');
			let hour2 = dateObj.getHours().toString().padStart(2, "0");
			let min2 = dateObj.getMinutes().toString().padStart(2, "0");

			if (date < 60) {
				return second + "秒前"
			} else if (date < 3600) {
				return min + "分前"
			} else if (date < 24 * 3600) {
				return hour + "小时前"
			} else if (date < 2 * 24 * 3600) {
				return "昨天" + hour2 + ":" + min2
			} else {
				return month + "月" + day2 + "日" + " " + hour2 + ":" + min2
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.comment {
	width: 100%;

	.box {
		padding: 0 30rpx;

		.list {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEE;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.lines {
				padding: 0 50rpx 0 18rpx;

				.who {
					font-weight: bold;
					font-size: 32rpx;
					color: $uni-text-color;

					.fans {
						display: inline-block;
						border-radius: 20rpx;
						border: 1px solid #DDDDDD;
						font-size: 20rpx;
						color: #888888;
						padding: 4rpx 12rpx;
						margin-left: 12rpx;
						font-weight: 400;
					}
				}

				.time {
					font-size: 24rpx;
					color: $uni-text-color-placeholder;
					margin: 12rpx 0;

					.now {
						display: inline-block;
						margin-left: 15rpx;
					}
				}

				.commentContent {
					font-size: 27rpx;
					color: #252525;
					line-height: 36rpx;
				}

				.tags {
					margin-top: 26rpx;

					.tag_l {
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #F4F4F6;
						border-radius: 30rpx;
						font-size: 24rpx;
						color: #252525;
						margin-right: 20rpx;

						.icons {
							width: 30rpx;
							margin-right: 6rpx;
						}
					}

				}
			}

			.talk {
				width: 110rpx;
				flex-shrink: 0;

				.likes_img {
					width: 110rpx;
					height: 110rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	.slot-content {
		width: 100%;
	}
}
</style>